<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">
            <el-form-item label="文章标题" prop="inviteMobile">
                <el-input
                v-model="queryParams.title"
                placeholder="请输入文章标题"
                clearable
                size="small"
                style="width: 240px"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <!-- <el-form-item label="更新时间">
                <el-date-picker
                v-model="queryParams.updateDate"
                size="small"
                style="width: 240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>

            <el-form-item label="创建时间">
                <el-date-picker
                v-model="queryParams.createDate"
                size="small"
                style="width: 240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item> -->

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table border :data="essayList">
            <el-table-column label="文章标题" width="150">
                <template slot-scope="scope">
                <span>{{ scope.row.newItems[0].title }}</span>
                </template>
            </el-table-column>
            <el-table-column label="文章链接" width="300">
                <template slot-scope="scope">
                <span>{{scope.row.newItems[0].url}}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="200">
                <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="更新时间" width="200">
                <template slot-scope="scope">
                <span>{{ scope.row.updateTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="onGroupSendingClick(scope.row)"
                    v-hasPermi="['reviewActivities:activities:remove']">
                    群发
                </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="essayList.length > 0"
            :total="essayTotal"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 添加或修改定时任务对话框 -->
        <el-dialog :close-on-click-modal="false" :before-close="closePushSelector" :visible.sync="showGroupSelector" width="700px" append-to-body>
            <el-collapse v-model="activeNames">
                <el-collapse-item title="选择客户" name="group">
                    <el-checkbox :indeterminate="groupOptions.isIndeterminate" v-model="groupOptions.checkAll" @change="handleGroupsCheckAll">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="groupOptions.checkedGroups" @change="handleGroupsCheckedChange">
                        <el-checkbox v-for="group in groups" :label="group" :key="group.dictValue">{{group.dictLabel}}</el-checkbox>
                    </el-checkbox-group>
                </el-collapse-item>
                <el-collapse-item v-if="groupOptions.checkedGroups.indexOf(groups[0]) >= 0" title="选择经纪人城市" name="city">
                    <el-checkbox :indeterminate="cityOptions.isIndeterminate" v-model="cityOptions.checkAll" @change="handleCitiesCheckAll">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="cityOptions.checkedCities" @change="handleCitiesCheckedChange">
                        <el-checkbox v-for="city in cities" :label="city" :key="city.dictValue">{{city.dictLabel}}</el-checkbox>
                    </el-checkbox-group>
                </el-collapse-item>
                <el-collapse-item title="选择标签" name="tag">
                    <el-checkbox :indeterminate="tagOptions.isIndeterminate" v-model="tagOptions.checkAll" @change="handleTagsCheckAll">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="tagOptions.checkedTags" @change="handleTagsCheckedChange">
                        <el-checkbox v-for="tag in tags" :label="tag" :key="tag.id">{{tag.sign}}</el-checkbox>
                    </el-checkbox-group>
                </el-collapse-item>
            </el-collapse>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

import { getEssayList, pushEssay } from "@/api/reviewActivities/mediaPush";
import { getTags } from "@/api/reviewActivities/userManager";
export default {
    name: "mediaPush.vue",
    data() {
        return {
            essayList: [],
            essayTotal: 0,

            // 查询参数
            queryParams: {
                page: 1,
                pageSize: 10,
                title: undefined, // 文章标题
                updateDate: undefined, // 更新时间
                createDate: undefined, // 创建时间
            },
            selectedEssay:null, // 群发选择的文章
            showGroupSelector: false, // 消息推送选择器
            // 城市选择
            cities: [],
            cityOptions: {
                CheckAll: false,
                checkedCities: [],
                isIndeterminate: false
            },

            // 客户分组选择
            groups:[],
            groupOptions: {
                CheckAll: false,
                checkedGroups: [],
                isIndeterminate: false
            },

            tags:[],
            tagOptions: {
                CheckAll: false,
                checkedTags: [],
                isIndeterminate: false
            },
            activeNames: []

        }
    },

    created() {
        this.getList();
        this.getPushOptions();
    },

    methods: {

        handleQuery() {
            this.getList();
        },

        resetQuery() {
            // 初始化请求参数
            this.queryParams.title = undefined;
            this.queryParams.updateDate = undefined;
            this.queryParams.createDate = undefined;

            this.handleQuery();
        },

        // 点击群发
        onGroupSendingClick(essay) {
            this.selectedEssay = essay;
            this.showGroupSelector = true;
        },

        // 获取文章列表
        getList() {
            getEssayList(this.queryParams)
                .then(res => {
                    console.log(res.data);
                    this.essayList = res.data.content.msgMaterialVOList;
                    this.essayTotal = res.data.content.totalCount;
                })
        },

        // 获取推送选项
        getPushOptions() {
            // 获取客户类型
            this.getDicts("user_type").then(response => {
                console.log("客户类型数据字典 --->",response)
                this.groups = response.data;
            });
            // 获取城市
            this.getDicts("sys_user_city").then(response => {
                console.log("城市数据字典 --->",response)
                this.cities = response.data;
            });
            // 获取标签
            getTags()
                .then(res => {
                    console.log("用户标签数据 --->", res);
                    this.tags = res.data;
                })
        },

        // 分组全选操作
        handleGroupsCheckAll(val) {
            this.groupOptions.checkedGroups = val ? this.groups : [];
            this.groupOptions.isIndeterminate = false;
            // 如果val == false, 清空城市选择
            if (!val) this.initCitiesSelector();

        },

        // 分组单选操作
        handleGroupsCheckedChange(value) {
            let checkedCount = value.length;
            this.groupOptions.checkAll = checkedCount === this.groups.length;
            this.groupOptions.isIndeterminate = checkedCount > 0 && checkedCount < this.groups.length;
            // 如果取消选择经纪人, 清空城市选择
            console.log("单选船只 --->",value,value.indexOf(this.groups[0]));
            if (value.indexOf(this.groups[0]) === -1) this.initCitiesSelector();
        },

        // 初始化城市选择界面
        initCitiesSelector() {
            // 收起选择城市折叠框
            if (this.activeNames.indexOf("city") >= 0) {
                this.activeNames.splice(this.activeNames.indexOf("city"),1);
            }
            // 清空选择城市数据
            if ( this.cityOptions.checkedCities.length > 0) {
                this.cityOptions.checkedCities = [];
                this.cityOptions.isIndeterminate = false;
                this.cityOptions.checkAll = false;
            }
        },

        // 城市全选操作
        handleCitiesCheckAll(val) {
            this.cityOptions.checkedCities = val ? this.cities : [];
            this.cityOptions.isIndeterminate = false;
        },

        // 城市单选操作
        handleCitiesCheckedChange(value) {
            let checkedCount = value.length;
            this.cityOptions.checkAll = checkedCount === this.cities.length;
            this.cityOptions.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },

        // 标签全选操作
        handleTagsCheckAll(val) {
            this.tagOptions.checkedTags = val ? this.tags : [];
            this.tagOptions.isIndeterminate = false;
        },

        // 标签单选操作
        handleTagsCheckedChange(value) {
            let checkedCount = value.length;
            this.tagOptions.checkAll = checkedCount === this.tags.length;
            this.tagOptions.isIndeterminate = checkedCount > 0 && checkedCount < this.tags.length;
        },

        // 群发选择器点击确定
        submitForm() {
            if (this.groupOptions.checkedGroups.length === 0 && this.tagOptions.checkedTags.length === 0)
                return this.$alert("请选择需要推送该文章的目标群体", '提示', {confirmButtonText: '确定'});
            // 处理参数
            let types = [];
            let cities = [];
            let signs = [];
            this.groupOptions.checkedGroups.map((group) => {
                types.push(group.dictValue);
            })
            this.cityOptions.checkedCities.map((city) => {
                cities.push(city.dictLabel);
            })
            this.tagOptions.checkedTags.map((tag) => {
                signs.push(tag.sign);
            })
            let params = {
                type: types,
                city: cities,
                sign: signs,
                media: this.selectedEssay.mediaId
            }
            // 推送
            pushEssay(params)
                .then(res => {
                    let hint = "";
                    if (res.data.isSuccess) {
                        hint = "文章推送成功";
                    } else {
                        hint = "文章推送失败，请稍后再试";
                    }

                    this.$alert(hint, '提示', {confirmButtonText: '确定'})
                })

            // 初始化推送选择
            this.closePushSelector();
        },

        // 群发选择器点击取消
        cancel() {
            this.closePushSelector();
        },


        // 关闭群发选择器
        closePushSelector() {
            this.showGroupSelector = false;

            // 初始化分组选择
            this.groupOptions.checkAll = false;
            this.groupOptions.isIndeterminate = false;
            this.groupOptions.checkedGroups = [];
            // 初始化城市选择
            this.cityOptions.checkAll = false;
            this.cityOptions.isIndeterminate = false;
            this.cityOptions.checkedCities = [];
            // 初始化标签选择
            this.tagOptions.checkAll = false;
            this.tagOptions.isIndeterminate = false;
            this.tagOptions.checkedTags = [];

            this.activeNames = [];
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
